<template>
  <div class="min-h-screen bg-primary-gradient">
    <!-- 页面头部 -->
    <div class="px-6 pt-10 pb-4">
      <div class="max-w-7xl mx-auto">
        <div class="flex items-center justify-between mb-6">
          <div>
            <h1 class="text-2xl font-bold text-white mb-2">每日数据汇总</h1>
            <p class="text-white/70">基于数据统计的比赛信息汇总展示</p>
          </div>
          <div class="text-right">
            <div class="bg-white/10 backdrop-blur-sm rounded-lg px-4 py-3 border border-white/20 flex items-center gap-4">
              <div class="flex items-center gap-2">
                <div class="text-sm text-white/60">今日汇总</div>
                <div class="text-2xl font-bold text-yellow-400">{{ recommendList.length }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 类型筛选 -->
        <div class="flex flex-wrap gap-2 mb-6">
          <button
            v-for="filter in typeFilters"
            :key="filter.value"
            @click="updateFilter(filter.value)"
            class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-300"
            :class="
              currentFilter === filter.value
                ? 'bg-gradient-to-r from-yellow-500 to-orange-500 text-white shadow-lg'
                : 'bg-white/10 text-white/70 hover:bg-white/20'
            "
          >
            {{ filter.label }}
          </button>
        </div>
      </div>
    </div>

    <!-- 推荐列表 -->
    <div class="px-6 pb-20">
      <div class="max-w-7xl mx-auto">
        <!-- 加载状态 -->
        <div v-if="loading" class="flex justify-center items-center py-20">
          <div class="loading-spinner"></div>
          <span class="ml-4 text-white/70">正在加载推荐数据...</span>
        </div>

        <!-- 推荐卡片列表 -->
        <div v-else-if="filteredRecommendList.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <div v-for="recommend in filteredRecommendList" :key="recommend.id" class="card group cursor-pointer">
            <!-- 卡片头部 -->
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center gap-3">
                <!-- 类型标签 -->
                <div class="px-3 py-1 rounded-full text-xs font-bold" :class="getTypeClass(recommend.type)">
                  {{ getTypeLabel(recommend.type) }}
                </div>
                <!-- 状态标签 -->
                <div class="px-3 py-1 rounded-full text-xs font-bold" :class="getStatusClass(recommend.status)">
                  {{ getStatusLabel(recommend.status) }}
                </div>
              </div>

              <!-- 评分 -->
              <div class="flex items-center gap-1">
                <i class="i-carbon-star-filled text-yellow-400 text-lg"></i>
                <span class="text-lg font-bold text-yellow-400">{{ recommend.score }}<span class="text-sm text-white/60">/10</span></span>
              </div>
            </div>

            <!-- 组合比赛列表 -->
            <div class="space-y-2 mb-4">
              <div
                v-for="(combo, index) in recommend.combinationData"
                :key="combo.matchId"
                @click="goToMatchDetail(combo.matchId)"
                class="bg-white/5 rounded-lg p-3 hover:bg-white/10 transition-all duration-300 border border-white/10 cursor-pointer"
              >
                <div v-if="getMatchInfo(combo.matchId)" class="flex items-center justify-between">
                  <div class="flex items-center gap-2 flex-1">
                    <div
                      class="w-6 h-6 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
                    >
                      {{ index + 1 }}
                    </div>
                    <div class="flex items-center gap-2 flex-1 min-w-0">
                      <span class="text-white/60 text-xs flex-shrink-0">{{ getMatchInfo(combo.matchId)?.matchNum }}</span>
                      <span class="text-white/80 text-sm truncate">{{ getMatchInfo(combo.matchId)?.homeTeam.name }}</span>
                      <span class="text-white/40 text-xs flex-shrink-0">VS</span>
                      <span class="text-white/80 text-sm truncate">{{ getMatchInfo(combo.matchId)?.awayTeam.name }}</span>
                    </div>
                  </div>
                  <div class="flex items-center gap-2 flex-shrink-0">
                    <span class="px-3 py-1 rounded-full bg-gradient-to-r from-green-600 to-emerald-600 text-white text-xs font-bold">
                      {{ combo.prediction }}
                    </span>
                    <i class="i-carbon-arrow-right text-white/40 text-sm"></i>
                  </div>
                </div>
                <!-- 如果找不到比赛信息的备用显示 -->
                <div v-else class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <div
                      class="w-6 h-6 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 flex items-center justify-center text-xs font-bold text-white"
                    >
                      {{ index + 1 }}
                    </div>
                    <span class="text-white/80 text-sm">比赛 ID: {{ combo.matchId }}</span>
                  </div>
                  <div class="flex items-center gap-2">
                    <span class="px-3 py-1 rounded-full bg-gradient-to-r from-green-600 to-emerald-600 text-white text-xs font-bold">
                      {{ combo.prediction }}
                    </span>
                    <i class="i-carbon-arrow-right text-white/40 text-sm"></i>
                  </div>
                </div>
              </div>
            </div>

            <!-- 建议 -->
            <div class="bg-white/5 rounded-lg p-4 border border-white/10">
              <div class="flex items-start gap-2">
                <i class="i-carbon-light-filled text-yellow-400 text-lg mt-0.5"></i>
                <div>
                  <h4 class="text-white font-semibold mb-1 text-sm">数据说明</h4>
                  <p class="text-white/80 text-sm leading-relaxed">{{ recommend.advice }}</p>
                </div>
              </div>
            </div>

            <!-- 时间信息 -->
            <div class="flex items-center justify-between mt-4 pt-4 border-t border-white/10">
              <div class="text-xs text-white/50">创建时间: {{ formatDateTime(recommend.createTime) }}</div>
              <div class="text-xs text-white/50">更新时间: {{ formatDateTime(recommend.updateTime) }}</div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else class="text-center py-20">
          <div class="w-24 h-24 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <i class="i-carbon-trophy text-4xl text-white/40"></i>
          </div>
          <h3 class="text-xl font-semibold text-white mb-2">暂无数据汇总</h3>
          <p class="text-white/60 mb-6">今天暂时没有数据汇总信息，请稍后再来查看</p>
          <button @click="refreshData" class="btn-primary">刷新数据</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getTodayFootballRecommend, getTodayFootballList } from '~/apis/football';
import type { RecommendItem, CombinationType, CombinationStatus, MatchItem } from '~/apis/football';

// SEO配置
useSEO({
  title: '每日数据汇总 - 足球数据查询平台',
  description: '提供足球比赛数据汇总展示服务，帮助用户快速了解多场比赛信息，仅供学习参考',
  keywords: '足球数据,数据汇总,比赛信息,数据展示,球球助手',
});

// 路由相关
const route = useRoute();
const router = useRouter();

// 响应式数据
const loading = ref(true);
const recommendList = ref<RecommendItem[]>([]);
const matchList = ref<MatchItem[]>([]);
// 从 query 中读取初始筛选器状态
const currentFilter = ref<string>((route.query.type as string) || 'ALL');

// 类型筛选器
const typeFilters = [
  { label: '全部', value: 'ALL' },
  { label: '二串一', value: 'TWO_LEG' },
  { label: '三串一', value: 'THREE_LEG' },
  { label: '四串一', value: 'FOUR_LEG' },
  { label: '五串一', value: 'FIVE_LEG' },
  { label: '高赔', value: 'HIGH_ODDS' },
];

// 过滤后的推荐列表
const filteredRecommendList = computed(() => {
  if (currentFilter.value === 'ALL') {
    return recommendList.value;
  }
  return recommendList.value.filter((item) => item.type === currentFilter.value);
});

// 更新筛选器（添加新函数）
const updateFilter = (filterValue: string) => {
  currentFilter.value = filterValue;
  // 更新 URL query 参数
  router.push({
    query: { type: filterValue === 'ALL' ? undefined : filterValue },
  });
};

// 获取推荐数据
const fetchRecommendData = async () => {
  try {
    loading.value = true;

    // 同时获取推荐数据和比赛列表
    const [recommendResponse, matchResponse] = await Promise.all([getTodayFootballRecommend(), getTodayFootballList()]);

    if (recommendResponse?.data) {
      recommendList.value = recommendResponse.data;
    }

    if (matchResponse?.data) {
      matchList.value = matchResponse.data;
    }
  } catch (error) {
    console.error('获取推荐数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 刷新数据
const refreshData = async () => {
  await fetchRecommendData();
};

// 根据 matchId 获取比赛信息
const getMatchInfo = (matchId: string) => {
  const match = matchList.value.find((item) => item.matchId === Number(matchId));
  return match?.matchData;
};

// 跳转到比赛详情（修改此函数）
const goToMatchDetail = (matchId: string) => {
  const query = currentFilter.value !== 'ALL' ? { from_type: currentFilter.value, matchId } : { matchId };
  navigateTo({
    path: `/football-detail`,
    query,
  });
};

// 获取类型标签
const getTypeLabel = (type: CombinationType): string => {
  const labels: Record<CombinationType, string> = {
    TWO_LEG: '二串一',
    THREE_LEG: '三串一',
    FOUR_LEG: '四串一',
    FIVE_LEG: '五串一',
    HIGH_ODDS: '高赔',
  };
  return labels[type] || type;
};

// 获取类型样式
const getTypeClass = (type: CombinationType): string => {
  const classes: Record<CombinationType, string> = {
    TWO_LEG: 'bg-gradient-to-r from-blue-600 to-cyan-600 text-white',
    THREE_LEG: 'bg-gradient-to-r from-green-600 to-emerald-600 text-white',
    FOUR_LEG: 'bg-gradient-to-r from-purple-600 to-pink-600 text-white',
    FIVE_LEG: 'bg-gradient-to-r from-orange-600 to-red-600 text-white',
    HIGH_ODDS: 'bg-gradient-to-r from-yellow-600 to-amber-600 text-white',
  };
  return classes[type] || 'bg-white/20 text-white';
};

// 获取状态标签
const getStatusLabel = (status: CombinationStatus): string => {
  const labels: Record<CombinationStatus, string> = {
    NOT_STARTED: '未开始',
    WINNING: '赢',
    LOSING: '输',
  };
  return labels[status] || status;
};

// 获取状态样式
const getStatusClass = (status: CombinationStatus): string => {
  const classes: Record<CombinationStatus, string> = {
    NOT_STARTED: 'bg-white/20 text-white',
    WINNING: 'bg-green-600 text-white',
    LOSING: 'bg-red-600 text-white',
  };
  return classes[status] || 'bg-white/20 text-white';
};

// 格式化日期时间
const formatDateTime = (timeStr: string) => {
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  });
};

// 生命周期
onMounted(async () => {
  await fetchRecommendData();
});
</script>

<style scoped>
/* 卡片悬停效果 */
.card {
  transition: all 0.3s ease;
}

/* 加载动画已在全局样式中定义 */
</style>
